<template>
	<div class="view">
		 <Modal 
        		v-model="data.isShow">
        		<p slot="header">
	            <span>{{formatTitle()}}</span>
	        </p>
			<Form ref="form" 
				:model="data.data" 
				:rules="ruleValidate" 
				:label-width="80">
				
		        <Form-item 
		        		label="姓名" 
		        		prop="name" 
		        		style="width: 300px;">
		            <Input 
		            		type="text" 
		            		ref="name"
		            		v-model="data.data.name"
		            		autofocus
		            		@on-keydown="handleSubmit2Enter($event, 'name')">
		            </Input>
		        </Form-item>
		        
		        <Form-item 
		        		label="角色名称" 
		        		style="width: 300px;"
		        		v-if="data.etag.type == 2">
		            <Input 
		            		type="text" 
		            		v-model="data.data.roleName"
		            		@on-keydown="handleSubmit2Enter($event, 'roleName')">
		            </Input>
		        </Form-item>
		        
		        <Form-item label="是否敏感">
		            <i-switch v-model="data.data.isSensitive"></i-switch>
		        </Form-item>
		        
		    </Form>
		    
		    <div slot="footer">
		    		<div class="btns">
			    		<div>
			    			<Button type="error" 
			    				:loading="data.isDel" 
			           		@click="handleDel()"
			           		v-if="data.actionType == 2">
			           		删除
			           	</Button>
			    		</div>
			    		
			    		<div class="btns-right">
			           	<Button type="primary" 
			           		:loading="data.isSubmit" 
			           		@click="handleSubmit()">
			           		提交
			           	</Button>
			           	
			            <Button type="ghost" 
			            		:disabled="data.isDel || data.isSubmit" 
			            		@click="handleCancel()" 
			            		style="margin-left: 8px">
			            		关闭
			            </Button>
		            	</div>
	            	</div>
	        </div>
	     </Modal>
	</div>

</template>

<script>
	export default {
		props: ['data'],
		data() {
			return {
				ruleValidate: {
                    name: [
                        { required: true, message: '名称不能为空', trigger: 'change' }
                    ]
                }
			}
		},
		mounted: function() {
			
		},
		methods: {
			focusName() {
				this.$refs['name'].focus();	
			},
			//点击后
			handleSubmit2Enter ($event, name) {
				console.log($event)
				if($event.code == 'Enter') {
					var $this = this;
					var data = this.data;
					if('name' == name) {
//						if((data.etag.etType != 1 && data.etag.etType != 2) || data.etag.type != 1) {//实体标签
//							return;
//		            		}
					}
					this.$refs['form'].validate((valid) => {
	                    if (valid) {
	                    		this.$emit('on-submit', $this.data);
	                    } else {
	                        this.$Message.error('表单验证失败!');
	                    }
	                });
				}
            },
			handleSubmit () {
				var $this = this;
                this.$refs['form'].validate((valid) => {
                    if (valid) {
                    		this.$emit('on-submit', $this.data);
                    } else {
                        this.$Message.error('表单验证失败!');
                    }
                });
            },
            handleDel () {
              	this.$emit('on-del', this.data);
            },
            handleCancel () {
                	this.data.isShow = false;
            },
            formatTitle () {
            		var data = this.data;
            		var title = '';
            		if(data.etag.type == 2) {
	            		title = data.actionType == 1? '新建演员' : '编辑演员';
            		} else {
	            		if(data.etag.etType == 1) {
	            			title = data.actionType == 1? '新建职员' : '编辑职员';
	            		} else {
	            			title = data.actionType == 1? '新建公司' : '编辑公司';
	            		}
            		}
            		return title;
            }
		}
	}
</script>

<style scoped="scoped">
	.CUserEntityTagEditModal {
		padding: 20px;
	}
	
	.btns {
		display: flex;
		display: -webkit-flex;
		display: -moz-flex;
	}
	.btns-right {
		flex: 1;
	}
	
</style>